<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书-图书续借</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/utilJs.js"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4">
        <div class="mt-9">
            <div class="df">
                <el-input placeholder="请输入条形码" size="small" style="width:200px;" v-model="ticketNumber"></el-input>
                <el-button size="small" type="primary" @click="searchBookStock" class="ml-2">搜索</el-button>
                <el-button size="small" type="primary" @click="batchRenewMethod" class="ml-2">批量续借</el-button>
            </div>

            <el-table :data="borrowBookTableData" v-loading="tableLoading"  @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column prop="bookName" label="书籍名称"></el-table-column>
                <el-table-column prop="isbn" label="isbn"></el-table-column>
                <el-table-column prop="indexBookNumber" label="索书号"></el-table-column>
                <el-table-column prop="ticketNumber" label="条形码"></el-table-column>
                <el-table-column  label="借出日期">
                    <template slot-scope="scope">
                        <span v-if="scope.row.rentDate">
                            {{scope.row.rentDate.split(" ")[0]}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="应还日期">
                    <template slot-scope="scope">
                        <span v-if="scope.row.shouldBackDate">
                            {{scope.row.shouldBackDate.split(" ")[0]}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="renewNum" label="已续借次数"></el-table-column>
                <el-table-column prop="maxRenewNum" label="最大续借次数"></el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button type="success" size="small" @click="renewMethod(scope.row,scope.$index)" v-if="scope.row.renewNum<scope.row.maxRenewNum">续借</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination background layout="total,sizes,prev, pager, next" :total="tableDataPaging.total"
                           :page-sizes="[10, 20, 50]"
                           prev-text="上一页" next-text="下一页"
                           :page-size="tableDataPaging.pageSize"
                           :current-page="tableDataPaging.currentPage"
                           @current-change="tableDataPagingChange"
                           @prev-click="tableDataPagingChange" @next-click="tableDataPagingChange"
                           @size-change="tableDataPagingSizeChange"
                           style="float:right;margin-top: 40px;padding-bottom:50px;">
            </el-pagination>
        </div>
    </div>

</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                tableDataPaging : {
                    currentPage : 1,
                    pageSize : 10,
                    total : 0,
                },
                ticketNumber : "",
                borrowBookTableData:[],
                addOrEditTypeForm : {
                    id : "",
                    name : "",
                    parentId : ""
                },
                renewList:[],
                tableLoading:false,
                multipleSelection: [],
            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                that.searchBookStock();
            });
        },
        methods: {
            //勾选的事件
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            tableDataPagingChange(val) {
                let that = this;
                that.tableDataPaging.currentPage = val;
                that.searchBookStock();
            },
            tableDataPagingSizeChange(val) {
                let that = this;
                that.tableDataPaging.pageSize = val;
                that.searchBookStock();
            },

            //查询借阅的图书信息
            searchBookStock(isChongZhi){
                let that = this;
                if (isChongZhi) {
                    this.tableDataPaging.currentPage = 1;
                }
                let queryParam= {
                    "ticketNumber" : $.trim(that.ticketNumber),
                    pageNum: this.tableDataPaging.currentPage,
                    pageSize: this.tableDataPaging.pageSize,
                }
                that.tableLoading = true;
                requestApiTB("record/getAllRecordByUserName",queryParam,'post',function(res){
                    that.tableLoading = false;
                    if(res.code === 0){
                        if(res.data){
                            that.borrowBookTableData = res.data.list;
                            that.tableDataPaging.total = res.data.total;
                        }else{
                            that.$message.error("查找不到数据");
                        }
                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },

            //批量续借的方法
            batchRenewMethod(){
                let that = this;
                if(that.multipleSelection.length == 0 ){
                    that.$message.error("请选择书籍");
                    return;
                }
                that.renewList = [];
                that.renewList = JSON.parse(JSON.stringify(that.multipleSelection));//深拷贝
                that.doRenewMethod();
            },
            //续借的方法
            renewMethod(row){
                let that = this;
                that.renewList = [];
                that.renewList.push(row);
                that.doRenewMethod();
            },

            //真正执行续借的方法
            doRenewMethod(){
                let that = this;
                if(that.renewList.length == 0){
                    that.$message.error("请选择需要续借的书籍");
                    return;
                }
                for(let i = 0 ; i < that.renewList.length ; i++){
                    if(that.renewList[i].maxRenewNum - that.renewList[i].renewNum == 0){
                        that.$message.error("对不起,条码号为:" + that.renewList[i].ticketNumber + " 的书,您的续借次数已经达到最大的"
                            + that.renewList[i].maxRenewNum
                            + "次,请先还回再重新进行借阅!");
                        return;
                    }
                }
                //过期仍然可以续借

                that.tableLoading = true;
                //判断书籍的状态
                requestApiTB("record/renewBooks",that.renewList,"post",function(res){
                    that.tableLoading = false;
                    if (res.code === 0) {
                        if(res.data){
                            alert("续借成功");
                            that.searchBookStock(true);
                        }
                    }else{
                        that.$message.error(res.msg);
                    }
                })
            }






        }
    })
</script>
</html>